<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #box{
            width: 200px;
            height: 200px;
            background: tomato;

            /*设置过渡属性*/

            /*设置过渡的位置，width,height,all,background-color等*/
            /*transition-property: width;*/
            /*设置过渡完成时间*/
            /*transition-duration:3s;*/
            /*设置过渡函数，过渡的速度和方式*/
            /*transition-timing-function: ease;*/

            /*设置延迟执行时间*/
            /*transition-delay: 3s;*/


            /*简写属性 推荐使用*/
            transition: all 3s linear;


        }


        #box:hover{
            width: 300px;
            height: 300px;

            transform: translate(3px,-10px);
            background: green;
            box-shadow: 0px 0px 10px 10px #ccc ;

        }


    </style>


</head>
<body>

<div id="box"></div>


</body>
</html>